import {
  Col,
  Row,
  Flex,
  Typography,
  Button,
  Input,
  Cascader,
  Form,
  Table,
  Alert,
  Switch,
  Image,
  message
} from 'antd'
import React from 'react'
import { useEffect } from 'react'
import { useState } from 'react'
import { qrcodeDisable, qrcodeEnable, shopQrcodeList } from '../service/shop'
import { regionData } from '../utils/region'
import qrcode from '../assets/img/qrcode.png'
function ShopQrcode() {
  // 获取省市区选中的值
  const regionChange = (value) => {
    console.log(value)
  }
  const [qrcodeList, setQrcodeList] = useState([])
  const [total, setTotal] = useState(0)
  const [pageNo, setPageNo] = useState(1)
  const [condition, setCondition] = useState({})
  // 保存表格中选中的项
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  // 表格中是否有选中
  const hasSelected = selectedRowKeys.length > 0
  // 二维码可见
  const [visible, setVisible] = useState(false)
  // 弹出二维码路径
  const [qrcodeUrl, setQrcodeUrl] = useState('')
  const [n, setN] = useState(0)
  useEffect(() => {
    ;(async () => {
      const res = await shopQrcodeList({
        ...condition,
        pageNo: 1,
        pageSize: 10
      })
      console.log(res)
      setQrcodeList(res.data.objects)
      setTotal(res.data.total)
    })()
  }, [n])
  return (
    <>
      <Row className="info">
        <Col span={24}>
          <Flex justify={'space-between'}>
            <Typography.Title level={3}>信息管理</Typography.Title>
          </Flex>
        </Col>
      </Row>
      <Row className="container">
        <Col span={24}>
          <Form
            layout="inline"
            onFinish={async (v) => {
              console.log(v)
              setCondition({
                storeName: v.storeName,
                storeAddress: v.storeAddress ? v.storeAddress.join() : ''
              })
              console.log(condition)
              const res = await shopQrcodeList({
                ...condition,
                pageNo,
                pageSize: 10
              })
              // console.log(res)
              setQrcodeList(res.data.objects)
              setTotal(res.data.total)
            }}
          >
            <Form.Item label="店铺名称：" name="storeName">
              <Input />
            </Form.Item>
            <Form.Item label="区域选择：" name="storeAddress">
              <Cascader
                options={regionData}
                onChange={regionChange}
                placeholder="请选择查询的省/市/区县"
                // style={{ width: 280 }}
              />
            </Form.Item>
            <Form.Item>
              <Button type="default" htmlType="reset">
                重置
              </Button>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
      {/* 表格 */}
      <Row className="container">
        <Col span={24}>
          <Typography.Paragraph style={{ fontSize: 16 }}>
            店铺列表
          </Typography.Paragraph>
          {hasSelected && (
            <Alert
              message={`已经选择 ${selectedRowKeys.length} 项`}
              type="info"
              showIcon
            />
          )}
        </Col>
        <Col span={24}>
          <Table
            pagination={{
              total,
              defaultCurrent: 1,
              onChange: async (page) => {
                const res = await shopQrcodeList({
                  ...condition,
                  pageNo: page,
                  pageSize: 10
                })
                console.log(res)
                setQrcodeList(res.data.objects)
                setTotal(res.data.total)
                setN(n + 1)
              }
            }}
            rowKey="id"
            rowSelection={{
              selectedRowKeys,
              onChange: (newSelectedRowKeys) => {
                console.log('selectedRowKeys changed: ', newSelectedRowKeys)
                setSelectedRowKeys(newSelectedRowKeys)
              }
            }}
            dataSource={qrcodeList}
            columns={[
              {
                title: '编号',
                dataIndex: 'id',
                key: 'id'
              },
              {
                title: '门店名称',
                dataIndex: 'storeName',
                key: 'storeName'
              },
              {
                title: '门店地址',
                dataIndex: 'storeAddress',
                key: 'storeAddress'
              },
              {
                title: '店铺名称',
                dataIndex: 'businessName',
                key: 'businessName'
              },
              {
                title: '链接',
                dataIndex: 'link',
                key: 'link'
              },

              {
                title: '启用状态',
                dataIndex: 'linkStatus',
                key: 'linkStatus',
                render: (_, record) => {
                  return (
                    <Switch
                      defaultChecked={!!record.linkStatus}
                      onChange={async (value) => {
                        if (value) {
                          const res = await qrcodeEnable(record.id)
                          message.success('启用成功')
                        } else {
                          const res = await qrcodeDisable(record.id)
                          message.warning('停用成功')
                        }
                      }}
                    />
                  )
                }
              },
              {
                title: '操作',
                dataIndex: 'op',
                key: 'op',
                align: 'center',
                render: (_, record) => {
                  return (
                    <span className="op">
                      <a
                        onClick={() => {
                          setVisible(true)
                          setQrcodeUrl(record.linkImg)
                        }}
                      >
                        查看二维码
                      </a>
                    </span>
                  )
                }
              }
            ]}
          />
        </Col>
      </Row>
      <Image
        width={200}
        style={{
          display: 'none'
        }}
        src={qrcode}
        preview={{
          className: 'centerBox',
          width: 220,
          visible,
          src: 'https://cdn.tmooc.cn/tmooc-web/css/img/erweima.jpg',
          onVisibleChange: (value) => {
            setVisible(value)
          }
        }}
      />
    </>
  )
}

export default ShopQrcode
